<template>
	<view class="details">
		<video class="video" id="video" :src="details && details.video_url" controls @play="_play"></video>
		<view class="details-content">
			<scroll-view class="details-scroll" scroll-y @scrolltolower="_scrolltolower">
				<view class="head">
					<view class="head-title">{{ details && details.title }}</view>
					<u-tag :text="details && Number(details.price) > 0 ? '￥' + details.price : '免费'" plain size="mini">
					</u-tag>
					<view class="head-text">
						<text>{{ details ? details.view_num_str : 0 }} 观看</text>
						<text>{{ details ? details.mtime : '--' }}</text>
					</view>
				</view>

				<view class="user">
					<u-avatar :src="details && details.avatar"></u-avatar>
					<view class="user-right">
						<view class="user-name" v-if="details">{{ details.nickname || details.username }}</view>
						<view class="user-time">{{ details && details.updated_at }}</view>
					</view>
				</view>

				<view class="details-list">
					<view class="details-list__title">交流区</view>

					<view class="details-list__item" v-for="item in list">
						<u-avatar :src="item.avatar"></u-avatar>
						<view class="details-comment">
							<view>
								<view>
									<view class="username">{{ item.nickname || item.username }}</view>
									<view class="time">{{ item.mtime }}</view>
								</view>
								<!-- <u-icon name="thumb-up"></u-icon> -->
							</view>
							<view class="content">{{ item.content }}</view>
							<view class="details-reply">{{ item.reply_num_str }}条回复 <u-icon name="arrow-right"
									style="margin-left: 8rpx;"></u-icon>
							</view>
						</view>
					</view>

					<view class="loadmore">
						<u-loadmore :status="status" @loadmore="_scrolltolower" />
					</view>
				</view>
			</scroll-view>
			<view class="details-input">
				<input type="text" v-model="comment" placeholder="请输入评论内容..." @confirm="_confirm" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		VideoPlayback,
		Comment,
		CommentList,
		NumberDeductions,
		AddView
	} from '@/common/api.js'

	export default {
		data() {
			return {
				details: null,
				comment: '',
				vid: '',
				page: 1,
				list: [],
				status: 'loading',
				is_last: false
			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		onLoad(options) {
			this.vid = options.id
			this._details(options.id)
			this._list()
		},
		methods: {
			...mapActions(['updateUserinfo']),
			_play() {
				AddView({
					video_id: this.vid
				}).then(res => {})
			},
			_scrolltolower() {
				if (this.is_last) return
				this.status = 'loading'
				this.page++
				this._list()
			},
			_list() {
				CommentList({
					page: this.page,
					vid: this.vid,
					type: 1,
					limit: 10
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						const {
							total_page,
							current_page,
							list
						} = data
						console.log(list)
						if (current_page === 1) {
							this.list = list
						} else {
							this.list = this.list.concat(list)
						}
						if (current_page >= total_page) {
							this.is_last = true
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					}
				})
			},
			_details(vid) {
				VideoPlayback({
					vid
				}).then(({
					code,
					data
				}) => {
					if (code === 200) {
						uni.setNavigationBarTitle({
							title: data.title
						})
						this.details = data
						// 免费用户每次扣除 vip用户只扣收费视频
						if (this.userinfo.is_vip === 0 || Number(this.details.price) > 0) {
							NumberDeductions().then(({ code }) => {
								if (code === 200) {
									this.updateUserinfo()
								}
							})
						}
					}
				})
			},
			_confirm() {
				if (!this.comment) return
				Comment({
					type: 1,
					vid: this.vid,
					content: this.comment
				}).then(({
					code,
					msg
				}) => {
					uni.hideKeyboard()
					uni.showToast({
						title: msg,
						icon: 'success'
					})
					if (code === 200) {
						this.comment = ''
						this._list()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		.loadmore {
			margin: 32rpx 0;
		}

		.content {
			margin: 24rpx 0;
		}

		.time {
			font-size: 24rpx;
			color: #909399;
		}

		.username {
			margin-bottom: 10rpx;
			color: #333;
		}

		.details-reply {
			background-color: #f4f4f5;
			font-size: 24rpx;
			padding: 6rpx 12rpx;
			color: #909399;
			display: inline-block;
		}

		.details-comment {
			margin-left: 24rpx;
		}

		.details-list__item {
			display: flex;
			margin-top: 32rpx;
		}

		.details-list {
			background-color: #fff;
			margin-top: 24rpx;
			padding: 32rpx;
		}

		.details-input {
			input {
				flex: 1;
				font-size: 28rpx;
				height: 60rpx;
				border-radius: 30rpx;
				padding: 0 24rpx;
				background-color: #e6e6e6;
			}

			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 104rpx;
			background-color: #fff;
			border-top: 1px solid #f2f6fc;
			padding: 32rpx;
		}

		.details-scroll {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 104rpx;
			left: 0;
		}

		.details-content {
			overflow: hidden;
			flex: 1;
			position: relative;
		}

		.user {
			.user-time {
				color: #909399;
			}

			.user-name {
				margin-bottom: 8rpx;
				font-size: 32rpx;
			}

			.user-right {
				margin-left: 24rpx;
			}

			background-color: #fff;
			margin-top: 24rpx;
			padding: 32rpx;
			display: flex;
			align-items: center;
		}

		.head-title {
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 8rpx;
		}

		.head-text {
			margin-top: 8rpx;
			display: flex;
			justify-content: space-between;
			color: #909399;
		}

		.head {
			padding: 32rpx;
			background-color: #fff;
		}

		.video {
			width: 750rpx;
		}

		height: 100vh;
		display: flex;
		flex-direction: column;
	}
</style>
